<!doctype html>
<html lang="en">

	<head>
		<!-- lang="en" 用于进网页之后的解析中英文 -->
		<meta charset="utf-8">
		<!--移动端优先的适配 配置-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS 引入 -->
		<link rel="stylesheet" href="bootstrap.css">

		<title>Hello, world!</title>
	</head>

	<body>
		<h1>Hello, world!</h1>
		<a href="#">我是经过bootstrap化的模板超链接标签</a>

		<!--以颜色为主题的辅助类修饰-->
		<p class="text-muted">灰暗色</p>
		<p class="text-primary">天蓝色</p>
		<p class="text-success">绿色</p>
		<p class="text-info">深蓝色</p>
		<p class="text-warning">土黄色</p>
		<p class="text-danger">红色</p>

		<!--背景色-->
		<p class="bg-primary">...</p>
		<p class="bg-success">...</p>
		<p class="bg-info">...</p>
		<p class="bg-warning">...</p>
		<p class="bg-danger">...</p>

		<br>

		<!--叉叉符号 bootstrap作了很大的作用-->
		<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<!--三角形符号-->
		<span class="caret"></span>

		<br>
		<!--浮动属性 不能用在导航栏标签 bootstrap 内部有唯一优先级 ！important 标识属性-->
		<!--
			<? class="puu-left">……<?>
			.pull-left{
				float: left !important;
			}
		-->
		<div class="pull-left">我是pull-left</div>
		<div class="pull-right">我是pull-right</div>

		<!--内容居中属性内部探讨-->
		<div class="center-block">...</div>
		<!--
			.center-block {
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		}
		-->
		
		<!--清除属性-->
		<div class="clearfix">清除属性，好像并没有什么软用</div>
		
		<br>
		<!--隐式显式作用  当有焦点事件发生时会调至指定标签处-->
		<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>


		<!-- Optional JavaScript 引入 -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
		<!--
        Bootstrap 自带的很多逻辑 + 样式 都为如a的下划线等常用标签做了最好的配置
    -->
	</body>

</html>